<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
</head>
<body>
  <!-- 登录 -->
  <form id="form_login">
    用户名：<input type="text" name="username"> 
    密码：<input type="password" name="password">
    <input type="submit" value="登录">
  </form>

  <!-- 用户管理页面 -->
  <div id="content" style="display: none;">
    欢迎您,<span id="user_info"></span><br>
    <!-- 添加区域 -->
    <div id="form_add" style="padding: 1rem 0;">
      姓名：<input type="text" name="username">
      性别：<input type="text" name="gender">
      民族：<input type="text" name="nation"> 
      身份：<input type="text" name="politicsStatus"> 
      联系方式：<input type="text" name="telephone"> 
      地址：<input type="text" name="address"> 
      <input type="submit" value="确认">
    </div>
    <!-- 内容区 -->
    <table border="1" cellspacing="0" cellpadding="20">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>民族</th>
          <th>身份</th>
          <th>联系方式</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
  <script>
    var token;
    var user;
    var formLogin = document.querySelector("#form_login");
    var formAdd = document.querySelector("#form_add");
    var content = document.querySelector("#content");
    var user_info = document.querySelector("#user_info")
    
    // 使用用户名密码换取token
    formLogin.onsubmit = function(){
      // 用xhr对象把http请求发送给服务器端
      // 初始化xhr对象
      var xhr = new XMLHttpRequest();
      console.log(xhr)
      // 设置请求行
      xhr.open("POST","http://39.96.21.48:7788/user/login")
      // 请求头
      xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
      // 请求体（参数）
      var username = document.querySelector("#form_login input[name=username]").value;
      var password = document.querySelector("#form_login input[name=password]").value;
      var data = {
        username:username,
        password:password
      }
      xhr.send(JSON.stringify(data))  // json / qs
      // 监听响应
      xhr.onreadystatechange = function(){
        // readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2: 请求已接收
        // 3: 请求处理中
        // 4: 请求已完成，且响应已就绪
        if(xhr.readyState === 4){
          if(xhr.status === 200){                           
            var resp = JSON.parse(xhr.response);
            // console.log(resp);
            if(resp.status === 200){
              token = resp.data.token;
              // 登录成功后，用token换取用户信息
              getInfo();
              //登录成功后，查询所有用户信息
              findAllUser();
              formLogin.style.display="none";
              content.style.display="block";
            } else {
              alert(resp.message);
            }
          }
        }
      }
      // 阻止表单的默认行为——同步提交
      event.preventDefault();
    }

    //  根据token获取用户信息
    function getInfo(){
      var xhr = new XMLHttpRequest();
      xhr.open("GET","http://39.96.21.48:7788/user/info?token="+token)
      xhr.setRequestHeader("Authorization",token);
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
      // 查询字符串 key=val&key=val
      // json {"key":val, "key":val}
      xhr.send()
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200){
            var resp = JSON.parse(xhr.response)
            user = resp.data;
            user_info.innerText = user.realname;
          }
        }
      }
    }
    //获取所有用户信息
    function findAllUser(){
      //实例化xhr对象
      var xhr=new XMLHttpRequest();
      //请求行
      xhr.open("GET","http://47.94.229.139:7788/baseUser/findAll");
      //请求头
      xhr.setRequestHeader("Authorization",token)
      //发送请求
      xhr.send();
      //监听响应
      xhr.onreadystatechange=function(){
        // console.log(xhr);
        if(xhr.readyState===4){
          if(xhr.status===200){
            // console.log(xhr)
            var response=JSON.parse(xhr.response);
            //console.log(response.data)
            response.data.forEach(function(item,index){
              //console.log(item)
              var table=document.createElement("table");
              var tr=document.createElement("tr");
              tr.innerHTML=`
                <td>`+item.id+`</td>
                <td>`+item.username+`</td>
                <td>`+item.gender+`</td>
                <td>`+item.nation+`</td>
                <td>`+item.politicsStatus+`</td>
                <td>`+item.telephone+`</td>
                <td>`+item.address+`</td>
                <td>
                  <a herf='#' onclick="deleteHandler()" class="btn_delete">删除</a>
                  <a herf='#' onclick="editHandler()" class="btn_edit">修改</a>
                </td>
              `
              document.getElementsByTagName('tbody')[0].appendChild(tr)
            })
          }
        }
      }
    }

    //删除用户信息
    function deleteHandler(){
      //alert("删除");
    }
    //修改用户信息
    function editHandler(){
      //alert("修改");
    } 
  </script>
</body>
</html>